<template>
  <div class="tab-container">
    <div class="createPost-container">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        class="form-container"
        v-loading="dialogFormLoading"
      >
        <div class="form-head">
          <el-dropdown :show-timeout="100" trigger="click" @command="handleSelectCategory">
            <el-button type="primary">
              分类：{{ form.category_id ? form.category.name : '选择分类' }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="category in categoryList"
                :key="category.id"
                :command="category"
              >
                {{ category.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button :loading="draftLoading" size="small" type="warning" @click="draftForm">
            保存为草稿
          </el-button>
          <el-button :loading="saveLoading" size="small" type="success" @click="submitForm">
            直接发布
          </el-button>
        </div>
        <div class="createPost-main-container">
          <el-row>
            <el-col :span="24">
              <el-form-item :label-width="labelWidth" label="标题:" prop="title">
                <el-input
                  v-model="form.title"
                  :rows="1"
                  placeholder="Please enter the title"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item :label-width="labelWidth" label="文章简介:" prop="content_short">
            <el-input
              v-model="form.content_short"
              :rows="2"
              type="textarea"
              class="article-textarea"
              placeholder="Please enter the content"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label-width="labelWidth"
            label="文章内容:"
            prop="content"
            class="content-bottom"
          >
            <el-input type="hidden" v-model="form.content" style="display: none"></el-input>
            <tinymce ref="tinymce" :value="form.content" />
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { detail, categoryList, createArticle, updateArticle } from '@/api/article'
export default {
  name: 'ArticleDetail',
  components: { Tinymce },
  data() {
    return {
      dialogFormLoading: false,
      labelWidth: '100px',
      draftLoading: false,
      saveLoading: false,
      categoryList: [],
      form: {},
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content_short: [{ required: true, message: '请输入文章概要', trigger: 'blur' }],
        content: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getCategoryList()
    this.resetForm()
  },
  activated() {
    const { article_id } = this.$route.params
    if (article_id) {
      this.getDetail(article_id)
    }
  },
  methods: {
    resetForm() {
      this.form = {
        status: 0,
        title: '', // 课程题目
        content: '', // 文章内容
        content_short: '', // 文章摘要
        category_id: 0,
        category: {},
        id: 0
      }
    },
    async getDetail(id) {
      const { err, res } = await detail({ id })
      if (err === null) {
        this.form = res
      }
    },
    async getCategoryList() {
      const { err, res } = await categoryList()
      if (err === null) {
        this.categoryList = res
        if (this.categoryList.length > 0) {
          this.handleSelectCategory(this.categoryList[0])
        }
      }
    },
    handleSelectCategory(category) {
      this.form.category = category
      this.form.category_id = category.id
    },
    async submitForm() {
      this.form.status = 1
      this.saveLoading = true
      await this.formSubmit()
      this.saveLoading = false
    },
    async draftForm() {
      this.form.status = 0
      this.draftLoading = true
      await this.formSubmit()
      this.draftLoading = false
    },
    async formSubmit() {
      if (!this.$refs.tinymce) {
        throw new Error('tinymce error')
      }
      this.dialogFormLoading = true
      const form = {
        ...this.form,
        content: this.$refs.tinymce.getContent()
      }
      let err
      if (this.form.id > 0) {
        const reuslt = await updateArticle(form)
        err = reuslt.err
      } else {
        const reuslt = await createArticle(form)
        err = reuslt.err
      }
      this.dialogFormLoading = false
      if (err === null) {
        this.$notify.success({
          title: '成功',
          message: `更新文章成功`
        })
        await this.$store.dispatch('delView', { name: 'ArticleDetail', path: '/article/list' })
        this.$router.push({ name: 'ArticleList', params: { detail_back: true } })
      } else {
        this.$notify.error({
          title: '失败',
          message: err
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.tab-container {
  margin: 30px;

  .form-head {
    height: 50px;
    text-align: right;
    background: #d0d0d0;
    line-height: 50px;
    margin-bottom: 20px;
    padding: 0 10px;
  }

  .banner-box {
    width: 280px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .icon-tag {
    font-size: 60px;
  }

  .banner-box img {
    max-width: 100%;
    max-height: 100%;
  }

  .content-bottom {
    margin-bottom: 60px;
  }

  .return-list {
    float: left;
  }
  .add-row {
    cursor: pointer;
    font-size: 15px;
  }
  .el-table__append-wrapper {
    line-height: 60px;
    color: #909399;
    min-height: 60px;
    text-align: center;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
</style>
